<template>
  <div class="box">
    <van-nav-bar
      title="京东注册"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="input" style="padding: 50px 0px">
      <!-- vant表单组件 -->
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field v-model="value" placeholder="请输入手机号" />
        </van-cell-group>
        <div style="margin: 80px 10px">
          <!--收集电话号码 -->
          <van-button
            round
            block
            :disabled="value.length !== 11"
            type="primary"
            native-type="submit"
          >
            下一步
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { yanzhengtel } from "../../service/regist";
import { showConfirmDialog } from "vant";

export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {
    //路由回退
    onClickLeft() {
      history.back();
    },
    //提交验证电话号码
    //若已经注册,跳转登录页
    onSubmit() {
      yanzhengtel({ tel: this.value }).then((res) => {
        console.log(res)
        if (res.data.code !== "200") {
          // vant轻提示
          showConfirmDialog({
            title: "提示",
            message: `手机号已被注册,是否去登录`,
          })
            .then(() => {
              this.$router.push("/login");
            }) .catch(()=>{
            })
            //检验电话号码基本格式
        }else if(this.value[0]==="1"&&this.value[1]!=="2"&&this.value[1]!=="1"){
          showConfirmDialog({
            title: "标题",
            message: `确定要向${this.value}发送验证码吗`,
          })
            .then(() => {
              this.$store.commit("chanphonenumber", this.value);
              this.$router.push("/regist/step2");
              // console.log("提交");
            })
            .catch(() => {
            });
        }else{
          showConfirmDialog({
            title: "提示",
            message: `请填写正确的电话号码`,
          })
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #f5f5f5;
  height: 100vh;
}
.input {
  margin: 10px;
}
</style>
